<template>
	<view class="container">
		<wjf-stat-breadcrumb :routes="routes"></wjf-stat-breadcrumb>
		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="name" :label="$w('用户名')">
				<uni-easyinput :placeholder="$w('请输入用户名')" :focus="focus" v-model="formData.username" trim="both"
					:inputBorder="false" />
			</uni-forms-item>
			<view class=" colorGray padding-bottom-20">
				<text>{{$w('设置后，将用于登录、查找等，具有唯一性。')}}</text>
			</view>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">{{$w('提交')}}</button>
			</view>
		</uni-forms>
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<uv-toast-wjf ref="uvToastWjf"></uv-toast-wjf>
		<uv-modal ref="uvModal" :title="uvModelParam.title" :content='uvModelParam.content' :align="uvModelParam.align"
			:confirmText="uvModelParam.confirmText" :cancelText="uvModelParam.cancelText"
			:showCancelButton="uvModelParam.showCancelButton"></uv-modal>
	</view>
</template>

<script>
	import {
		mapActions,
	} from 'vuex';
	import {
		// store as uniIdStore,
		mutations as uniIdMutations
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import commMixinWjf from '@/common/mixin/common-mixin-wjf.js'
	import mixinRules from './mixin-rules';
	const db = uniCloud.database();
	
	import message from '../i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	const wjfObj = uniCloud.importObject('wjf-co', {
		customUI: false,
		loadingOptions: { // loading相关配置
			title: $w('检查数据库')+'...', // 显示的loading内的提示文字。默认值为：加载中...
			mask: true // 是否使用透明遮罩，配置为true时不可点击页面其他内容。默认值为：true
		}
	})
	export default {
		mixins: [commMixinWjf, mixinRules],
		data() {
			return {
				formData: {
					username: "",
				},
				focus: true,
			}
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			routes() {
				return [{
						to: "/pages/index/user",
						name: this.$w("用户中心"),
					},
					{
						to: "/pages/user/info/info",
						name: this.$w("用户信息"),
					},
					{
						to: "",
						name: this.$w("用户名"),
					}
				]
			}
			// userInfo() {
			// 	return this.$store.state.user.userInfo;
			// },
		},
		onLoad() {
			if (this.userInfo.username) {
				this.formData.username = this.userInfo.username;
			}
		},
		onShow() {},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			test() {
				console.log(this.userInfo);
				// wjfObj.wjfSearchUserExists({
				// 	username: 'wjf5866',
				// }).then(({
				// 	resUserMatched
				// }) => {
				// 	console.log(resUserMatched.userMatched);
				// })
			},
			...mapActions({
				getUserInfo: 'user/getUserInfo',
			}),
			//先判断是否已被注册
			async submit() {
				if (!this.formData.username) {
					uni.showToast({
						title: this.$w('请输入用户名'),
						icon: 'error'
					});
					this.formData.username = this.formData.username.trim()
					return
				}

				const {
					resUserMatched
				} = await wjfObj.wjfSearchUserExists({
					username: this.formData.username,
				})

				const checkUser = resUserMatched.userMatched.filter(item => item._id != this.userInfo._id)
				console.log(checkUser);
				if (checkUser.length > 0) {
					this.$uvToastWjf({
						message: this.$w('该账号(用户名)已被使用,请另换一个')
					})
					return
				} else {
					this.toSave()
				}
			},
			toSave() {
				let newUserInfo = Object.assign({}, this.userInfo, {
					username: this.formData.username
				})
				this.$uvModal({
					content: this.$w('请再次确认'),
					align: 'center',
					showCancelButton: true
				}, () => {
					db.collection("uni-id-users").doc(this.userInfo._id).update({
						username: this.formData.username
					}).then(res => {
						this.$uvToastWjf({
							message: this.$w("修改成功"),
							type: 'success'
						})
						uniIdMutations.setUserInfo(newUserInfo)
						this.getUserInfo()
						this.navTimeBack();
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: rgba(240, 240, 240, 1);
	}

	.uni-button-group {


		// .uni-button {
		// 	flex: 1;
		// }
	}

	.uni-forms .uni-forms-item {
		background: #fff;
		padding: 6rpx;
		padding-left: 22rpx;
	}
</style>